<template>
  <div>
    <el-form size="small" :inline="true" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12">
          <div ref="chartContainer" style="height: 400px;"></div>
          <span class="chart-title">各分类商品占比</span>
        </el-col>
        <el-col :span="12">
          <div ref="warehouseContainer" style="height: 400px;"></div>
          <span class="chart-title">各仓库库存占比</span>
        </el-col>
      </el-row>
    </el-form>
  </div>


</template>

<script>
import * as echarts from 'echarts';
import {listCategory, listWarehouse} from "@/api/erp/productdistribution";

export default {
  name: 'ChartExample',
  mounted() {
    // 确保 DOM 已挂载
    this.initChart();
  },
  data() {
    return {
      formChartContainer: [],
      formWarehouseContainer: []
    }
  },
  created() {
    this.category()
  },
  methods: {
    initChart() {
      // 确保引用存在
      if (this.$refs.chartContainer) {
        const chart = echarts.init(this.$refs.chartContainer);
        // 设置图表配置项
        const option = {
          // 图表配置
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.formChartContainer
            }
          ]
        };
        chart.setOption(option);
      }
    },
    initWarehouse() {
      // 确保引用存在
      if (this.$refs.warehouseContainer) {
        const chart = echarts.init(this.$refs.warehouseContainer);
        // 设置图表配置项
        const option = {
          // 图表配置
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.formWarehouseContainer
            }
          ]
        };
        chart.setOption(option);
      }
    },
    category() {
      listCategory().then(response => {
        this.formChartContainer = response.data
        this.initChart()
      })
      listWarehouse().then(response => {
        this.formWarehouseContainer = response.data
        this.initWarehouse()
      })
    }
  },
}
</script>

<style scoped lang="scss">
.chart-title {
  display: block;
  text-align: center;
  margin-top: 10px; /* 调整与图表的间距 */
}
</style>
